<template>
  <div class="star" :class="'star-'+size">
    <span class="star-item" v-for="(sc, index) in starClasses" :class="sc" :key="index"></span>
  </div>
</template>

<script>
  // 类名常量
  const CLASS_ON = 'on'
  const CLASS_HALF = 'half'
  const CLASS_OFF = 'off'
  export default {
    name: 'Star',
    props: {
      score: Number,
      size: Number,
    },
    computed: {
      starClasses() {
        const {score} = this
        const scs = []
        // 向 scs 中添加 on half off
        for (let i = 1; i <= Math.floor(score); i++) {
          scs.push(CLASS_ON)
        }
        if (score*10 - Math.floor(score)*10 >= 5) {
          scs.push(CLASS_HALF)
        }
        while (scs.length < 5) {
          scs.push(CLASS_OFF)
        }
        return scs
      }
    }
  }
</script>

<style lang="less">
  @import '../../common/less/mixins.less';
  .star {
    float: left;
    font-size: 0;
    .star-item {
      display: inline-block;
      background-repeat: no-repeat;
    }
    &.star-24 {
      .star-item {
        width: 10px;
        height: 10px;
        margin-right: 3px;
        background-size: 10px 10px;
        &:last-child {
          margin-right: 0;
        }
      }
      .on {
        // .bg-image('./images/star24_on');
        background-image: url('./images/star24_on@2x.png');
        @media (-webkit-min-device-pixel-ratio: 3) and (min-device-pixel-ratio: 3) {
          background-image: url('./images/star24_on@3x.png');
        }
      }
      .half {
        background-image: url('./images/star24_half@2x.png');
        // .bg-image('./images/star24_half');
      }
      .off {
        background-image: url('./images/star24_off@2x.png');
        // .bg-image('./images/star24_off');
      }
    }                    
    &.star-48 {
      .star-item {
        width: 20px;
        height: 20px;
        margin-right: 22px;
        background-size: 20px 20px;
        &:last-child {
          margin-right: 0;
        }
      }
      .on {
        background-image: url('./images/star48_on@2x.png');
        // .bg-image('./images/star48_on')
      }
      .half {
        background-image: url('./images/star48_half@2x.png');
        // .bg-image('./images/star48_half')
      }
      .off {
        background-image: url('./images/star48_off@2x.png');
        // .bg-image('./images/star48_off')
      }
    }
    &.star-36 {
      .star-item {
        width: 15px;
        height: 15px;
        margin-right: 6px;
        background-size: 15px 15px;
        &:last-child {
          margin-right: 0;
        }
      }
      .on {
        background-image: url('./images/star36_on@2x.png');
        // .bg-image('./images/star36_on')
      }
      .half {
        background-image: url('./images/star36_half@2x.png');
        // .bg-image('./images/star36_half')
      }
      .off {
        background-image: url('./images/star36_off@2x.png');
        // .bg-image('./images/star36_off')
      }
    }
  }
</style>